import React, { useContext } from 'react'
import classes from './Counter.module.css'
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { Space } from 'antd'
import CartContext from '../../../../store/CartContext';

const Counter = (props) => {
    const ctx = useContext(CartContext)


    const addButton = () => {
        // props.onAdd(props.meal)
        ctx.addItem(props.meal)
    }
    const subButton = () => {
        // props.onSub(props.meal)
        ctx.removeItem(props.meal)
    }

    return (
        <div className={classes.Counter}>
            {
                (props.meal.amount && props.meal.amount !== 0) ? (
                    <>
                        <Space>
                            <MinusCircleOutlined className={classes.Sub} onClick={subButton} />
                        </Space>
                        <span className={classes.count}>{props.meal.amount}</span>
                    </>
                ) : null
            }
            <Space>
                <PlusCircleOutlined className={classes.Add} onClick={addButton} />
            </Space>
        </div>
    )
}

export default Counter